webpack - dll

项目中，要引入许多的第三方模块。这些第三方模块在打包的时候会被打包进最后生成的文件之中。

导致最后生成的文件过大的同时也增加了打包的时间。

如果这些第三方模块能只打包一次，之后就直接使用这些打包好的模块；

当使用第三方库的时候，直接从从我们预先打包出的文件中去寻找即可。

单独打包第三方模块

由于需要单独打包第三方模块，所以需要一个创建独立的Webpack配置文件webpack.dll.js。

const webpack = require('webpack');
const {resolve} = require('path');

module.exports = {
  entry: {
    vendors: ['lodash']
  },
  output: {
    path: resolve(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: resolve(__dirname, 'dll/manifest.json')
    })
  ],
  mode: 'production'
}

该文件主要作用

• lodash则打包进vendors.dll.js里面；
• plugins内使用了一个DLLPlugin，这个插件会在path字段所给出的路径生成一个manifest.json。这个json文件包含了import或require请求到模块ID的映射。这个文件在正式打包项目代码的时候会用到。

先运行此文件试试：

在package.json文件中添加scripts - "dev-dll": "webpack --config webpack.dll.js"，

然后执npm run dev-dll

正式打包项目

在打包前，我们需要使用到webpack的DllReferencePlugin，这个plugin的作用主要是：

告诉webpack哪些库不参与打包。

另外，我们还需要在打包的时候，将之前打包好的库，一起打包出去，并且在html中自动引入，

npm install add-asset-html-webpack-plugin -D

然后配置webpack.config.js文件的plugins中

    // dll
    // 告诉webpack哪些库不参与打包
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, 'dll/manifest.json')
    }),
    // 之前打包好的库，一起打包出去，并且在html中自动引入
    new AddAssetHtmlWebpackPlugin({
      filepath: path.resolve(__dirname, 'dll/vendors.dll.js')
    }),

构建项目

后面，构建项目的时候就不需要在打包lodash的包了。

本章结束！